<script setup lang="ts">
import { fetchGetTotalNum } from '@/api/screen/home'
import { onMounted, reactive } from 'vue';
import { CountTo } from 'vue3-count-to';
const filterEnName = (val: string) => {
  return val.toUpperCase();
};

let cardList = reactive([
  {
    name: "成员总数",
    enName: "Total number of members",
    number: 7125,
    iconClass: "card-list-1",
    countClass: "count1",
  },
  {
    name: "社团总数",
    enName: "cadres at their posts",
    number: 1125,
    iconClass: "card-list-2",
    countClass: "count2",
  },
  {
    name: "在职干部",
    enName: "officials in active service",
    number: 175,
    iconClass: "card-list-3",
    countClass: "count3",
  },
  {
    name: "库存物资",
    enName: "Inventory",
    number: 632,
    iconClass: "card-list-4",
    countClass: "count4",
  },
  {
    name: "等待审批",
    enName: "pending approval",
    number: 15,
    iconClass: "card-list-5",
    countClass: "count5",
  },
])

onMounted(() => {
  getTotalNum()
})
const getTotalNum = async () => {
  const res = await fetchGetTotalNum()
  cardList[0].number = res.data.person
  cardList[1].number = res.data.society
  cardList[2].number = res.data.manage
  cardList[3].number = res.data.goods
  cardList[4].number = res.data.check
}
</script>


<template>
  <div class="dataCard-content" v-for="(item, index) in cardList" :key="index">
    <h2 class="card-name">{{ item.name }}</h2>
    <div class="en-name">{{ filterEnName(item.enName) }}</div>
    <div class="card-info flex justify-between items-center">
      <count-to :startVal="0" :endVal="item.number" :decimals="0" :duration="3000" class="card-count"
        :class="item.countClass"></count-to>
      <svg-icon class="card-icon" :icon-class="item.iconClass" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.dataCard-content {
  max-width: 300px;
  width: 20%;
  height: 100%;
  max-height: 150px;
  background-color: #fff;
  padding: 15px;
  margin-right: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    transform: translateY(-5px);

    box-shadow: 0px 0.8px 2.2px rgba(0, 0, 0, 0.02),
      0px 1.9px 5.3px rgba(0, 0, 0, 0.028), 0px 3.5px 10px rgba(0, 0, 0, 0.035),
      0px 6.3px 17.9px rgba(0, 0, 0, 0.042),
      0px 11.7px 33.4px rgba(0, 0, 0, 0.05), 0px 28px 80px rgba(0, 0, 0, 0.07);

    .card-name {
      color: #ffff;
    }

    .en-name {
      color: #fff;
    }

    .card-count {
      color: white !important;
    }
  }

  &:hover::before {
    opacity: 1;
    visibility: visible;
  }

  &::before {
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    border-radius: 3px;
    z-index: -1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  .card-name {
    color: rgb(35, 88, 69);
    font-size: 2.4rem;
  }

  .en-name {
    color: #ccc;
    padding: 10px 0;
  }

  .card-info {
    height: 50px;

    .card-count {
      font-size: 4.8rem;
      font-weight: 700;
    }

    .count1 {
      color: #2b5deb;
    }

    .count2 {
      color: #00bab5;
    }

    .count3 {
      color: #885aef;
    }

    .count4 {
      color: #e19904;
    }

    .count5 {
      color: #ef6666;
    }

    .card-icon {
      width: 40px !important;
      height: 40px !important;
    }
  }
}
</style>
